<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view v-else>
		<view class="wrap" v-if="info">
			<!-- #ifndef MP-WEIXIN -->
			<u-navbar bgColor="rgba(0,0,0,0)" :placeholder="true" :fixed="true" title="">
				<view slot="left">
					<image :src="'/images/navicon-backb.png' | formatImgUrl" style="width: 36rpx;height: 36rpx;"
						mode="aspectFill" @tap="$back"></image>
				</view>
				<view slot="right">
					<text class="float-btn" style="position: static;" v-if="info && info.img && info.img.length"
						@tap="look_lw(info.img)">点击查看例文</text>
				</view>
			</u-navbar>
			<!-- #endif -->
			<!-- :style="{'background-image': 'url('+ $options.filters.formatImgUrl(info.user.writer_apply.img[0]) +')','background-repeat': 'no-repeat','background-size': '100% 600rpx','background-position': 'top center','padding-bottom': '150rpx'}" -->
			<!-- <image class="bg_img" :src="'/images/showcase_bg.png' | formatImgUrl" mode=""></image> -->

			<block v-if="isScroll">
				<swiper :indicator-dots="true" :interval="3000" :duration="1000" class="preview-box">
					<swiper-item class="preview-item" v-for="(it,ix) in info.img" :key="ix">
						<image :src="it | formatImgUrl" mode="heightFix"></image>
					</swiper-item>
				</swiper>
			</block>
			<block v-else>
				<!-- #ifdef MP-WEIXIN -->
				<text class="float-btn"  v-if="info.img &&info.img.length" @tap="$common.previewImage(0,info.img)">点击查看例文</text>
				<!-- #endif -->
				<image :src="$options.filters.formatImgUrl(info.img &&info.img[0])" mode="aspectFill" class="bg_img">
				</image>
				
				<view class="head" style="height: 362rpx;">
					<!-- <view class="tit tits" v-if="type!=1">
							本橱窗总计交易次数</image>
						</view>
						<view class="money_num" v-if="type!=1">
							{{info.buy_num}}次
						</view>
					
						<view class="tit tits" v-if="type==1">
							本橱窗总计金额</image>
						</view>
						<view class="money_num" v-if="type==1">
							{{info.order_money}}元
						</view>
					
						<view class="consumption" v-if="type!=1">
							<view class="today">
								<view class="total_tit">
									好评率：
								</view>
								<text class="num">{{info.rank_l}}%</text>
							</view>
							<view class="today">
								<view class="total_tit">
									准时率
								</view>
								<text class="num">{{info.efficiency_l}}%</text>
							</view>
							
							<view class="today">
									<view class="total_tit">
										完稿率
									</view>
									<text class="num">90.0%</text>
								</view> 
						</view>
						<view class="consumption" v-if="type==1">
							<view class="today">
								<view class="total_tit">
									好评率：
								</view>
								<text class="num">{{info.rank_l}}%</text>
							</view>
							<view class="today">
								<view class="total_tit">
									共计接单
								</view>
								<text class="num">{{info.order_num}}%</text>
							</view>
							<view class="today">
								<view class="total_tit">
									浏览量
								</view>
								<text class="num">
									{{info.look_num}}
								</text>
							</view>
						</view> -->
				</view>
				
				
				<view class="mask_img_bg">
					<view class="showcase_item">
						<view class="showcase_head">
							<image :src="info.class_type&&info.class_type.icon | formatImgUrl" mode="" class="i1"></image>
							<text class="tit" style="width: 90%;">{{info.title}}</text>
				
							<view class="jubox" style="padding: 10rpx;top: 0;" @tap.stop="show_wr=true" v-if="info.user&&info.user.membe_id == $db.get('userInfo').membe_id">
								<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="">
								</image>
							</view>
							<view class="jubox" style="padding: 10rpx;top: 0;" @tap.stop="show=true" v-else>
								<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="">
								</image>
							</view>
				
							<!-- <image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="" v-if="type==1"
								@click="show_wr=true"></image>
							<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="" v-else @click="show=true">
							</image> -->
				
						</view>
						<view class="showcase_content" style="color: #999;">
							{{info.desc?info.desc:""}}
						</view>
						<view class="showcase_wrap">
							<view class="wrap_item">
								<image :src="'/images/re_list1.png'| formatImgUrl" mode="">作品类型：</image>
								<text>{{info.class_type&&info.class_type.title}}</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list2.png'| formatImgUrl" mode="">起拍单数：</image>
								<text>{{info.start_shooting}}单起拍</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/order_num.png' | formatImgUrl" mode="">下单数量：</image>
								<text>{{info.buy_num}}人</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list3.png' | formatImgUrl" mode="">用户评价：</image>
								<text>{{info.rank}}星</text>
							</view>
							<view class="wrap_item">
								<image :src="'/images/re_list4.png ' | formatImgUrl" mode="">费用标准：</image>
								<text>{{Number(info.price).toFixed(0)}}币/{{info.word_count}}</text>
							</view>
							<!-- 10.16新增 -->
							<view class="wrap_item">
								<image :src="'/images/re_list5.png ' | formatImgUrl" mode="">累计交易：</image>
								<text>{{info.count}}次</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="showcase_item item_warp" v-if="info.user&&info.user.membe_id != $db.get('userInfo').membe_id">
					<view class="showcase_head user_head">
						<image v-if="type==1" @tap.stop="$go('/pages/my/my?id=' + info.user&&info.user.membe_id)"
							:src="info.user&&info.user.pic | formatImgUrl" mode="" class="pic"></image>
						<image v-else :src="info.user.pic | formatImgUrl" mode="" class="pic"
							@tap.stop="$go('/pages/my/my?id=' + info.user&&info.user.membe_id)"></image>
						<view class="user_box">
							<view class="top display-flex just-between">
								<view class="display-flex" style="width: 100%;">
									<text class="tit">{{info.user&&info.user.username}}</text>
									<image
										:src="$options.filters.formatImgUrl(info.user.writer_level.is_active?info.user.writer_level.level.image:info.user.writer_level.level.hide_img)"
										@click="$go('/pages/user/grade?uid='+info.user&&info.user.membe_id)" class="jipic" mode=""
										v-if="info.user&&info.user.is_writer">
									</image>
				
									<image v-if="info.user&&info.user.user_level.is_active"
										:src="!info.user.user_level.level?'':($options.filters.formatImgUrl(info.user.user_level.active_day>0?info.user.user_level.level.image:info.user.user_level.level.hide_img))"
										class="biepic" mode="">
									</image>
								</view>
				
								<text class="contact-btn" @tap="toImRoom">沟通</text>
							</view>
							<view class="user_info2 display-flex">
								<image :src="'/images/nullicon.png' | formatImgUrl" mode="aspectFit"
									v-if="info.user&&info.user.sex == 0"></image>
								<image :src="'/images/boyicon.png' | formatImgUrl" mode="aspectFit"
									v-if="info.user&&info.user.sex == 1"></image>
								<image :src="'/images/gender1.png' | formatImgUrl" mode="aspectFit"
									v-if="info.user&&info.user.sex == 2"></image>
				
								<text>{{info.user&&info.user.writer_apply && info.user.writer_apply.age_str ? info.user.writer_apply.age_str + '岁':"年龄保密"}}</text>
								<image :src="'/images/writeage.png' | formatImgUrl" mode="aspectFit"></image>
								<text>{{info.user.writer_apply?info.user.writer_apply.pen_age:"-"}}年</text>
				
								<view class="onlines display-flex">
									<view class="dian" :class='info.user&&info.user.is_line==1?"lines":"noline_str"'>
									</view>
									<view class="online" v-if="info.user&&info.user.is_line==1" :class='info.user.is_line==1?"":"noline_str"'>
										当前在线
									</view>
									<view class="online" v-else style="color: #999;">
										{{info.user&&info.user.line_time_str}}
									</view>
									
								</view>
							</view>
						</view>
						<!-- <image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="" @tap.stop="show=true"></image> -->
				
					</view>
					<view class="showcase_content" style="margin-bottom: 0;">
						{{info.user.signature_des || "该用户什么都没有填写"}}
					</view>
				</view>
				
				<view class="line"></view>
				<view class="showcase_item">
					<view class="total-comments">
						<view class="display-flex">
							<view class="left-box">
								<view class="display-flex">
									<text class="total-num">{{Number(info.comprehensive).toFixed(1)}}</text>
									<view class="total-star">
										<u-rate :count="count" v-model="value" active-color="#45C4B0"></u-rate>
										<view class="total-font">
											共{{total}}条评价
										</view>
									</view>
								</view>
								<view class="display-flex sort-type">
									<text>效率 {{info.efficiency_l}}</text>
									<text>内容 {{info.cont_l}}</text>
									<text>文笔 {{info.writings_l}}</text>
								</view>
							</view>
				
							<view class="right-box">
								<view class="display-flex mb12">
									<text>满意</text>
									<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)"
										:showText="false" :percentage="info.rank_l"></u-line-progress>
									<text class="fonttxt">{{Number(info.rank_l).toFixed(0)}}%</text>
								</view>
								<view class="display-flex mb12">
									<text>一般</text>
									<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)"
										:showText="false" :percentage="info.rank_ll"></u-line-progress>
									<text class="fonttxt">{{Number(info.rank_ll).toFixed(0)}}%</text>
								</view>
								<view class="display-flex">
									<text>不满</text>
									<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)"
										:showText="false" :percentage="info.rank_lll"></u-line-progress>
									<text class="fonttxt">{{Number(info.rank_lll).toFixed(0)}}%</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empytView" v-if="list.length<=0">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
				
				
				
				<block v-if="list.length">
					<view class="" style="padding-bottom: 150rpx;">
						<view v-for="(item,index) in list" class="showcase_item item_warp">
							<view class="showcase_head user_head">
								<image v-if="type==1" @tap.stop="$go('/pages/my/my?id=' + item.uid)"
									:src="item.pic | formatImgUrl" mode="" class="pic"></image>
								<image v-else :src="item.pic | formatImgUrl" mode="" class="pic"></image>
								<view class="user_box">
									<view class="top">
										<text class="tit">{{item.username}}</text>
										<view class="tip suc" v-if="item.rank==5">
											很满意
										</view>
										<view class="tip suc" v-if="item.rank==4">
											满意
										</view>
										<view class="tip zhong" v-if="item.rank==3">
											一般
										</view>
										<view class="tip" v-if="item.rank==2">
											不满
										</view>
										<view class="tip" v-if="item.rank==1">
											很不满
										</view>
									</view>
									<view class="user_info" style="font-size: 24rpx;color: #999;">
										{{item.create_time}}发起约文
									</view>
								</view>
								<view class="jubox" style="padding: 10rpx;top: 0;" @tap.stop="show=true">
									<image :src="'/images/bao.png' | formatImgUrl" class="jubox" mode="">
									</image>
								</view>
							</view>
							<view class="showcase_content">
								{{item.eval_row?item.eval_row:"这位单主什么都没有留下"}}
							</view>
						</view>
					</view>
				
				</block>
				
			</block>

			

		</view>

		<u-popup :show="show" @close="close">
			<view class="mask" v-if="type==1">
				<view class="matop" @click="goToreport11">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
			<view class="mask" v-else>
				<view class="matop" @click="jubao()">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>


		<u-popup :show="show_wr" @close="show_wr=false">
			<view class="mask">
				<view class="matop" @click="goToreport()">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt">
						编辑
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>

				<view class="matop" style="margin-top: -10px;">
					<!-- <image :src="'/images/jing.png'  | formatImgUrl" class="mapic" mode=""></image> -->
					<view class="matxt" @click="delItem()">
						删除
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>

				<view class="qubox" @click="show_wr = false">
					取消
				</view>
			</view>
		</u-popup>

		<view class="footer" v-if="type!=1">
			<view class="wrap">
				<view class="wrap_left">
					<view class="top">
						<text class="choose">查看橱窗</text>
						<text class="num">确认相关信息</text>
					</view>
					<view class="bottom">
						查看完毕请点击右侧"立即下单"
					</view>
				</view>
				<view class="wrap_right" @click="show2=true">
					立即下单
				</view>
			</view>
		</view>

		<!-- 沟通弹框 -->
		<u-popup :show="show2" mode="center" @close="show2=false" :overlay="true">
			<view class="baibox">
				<image :src="info.user&&info.user.pic | formatImgUrl" class="baihead" mode=""></image>
				<view class="nickname">
					{{info.user&&info.user.username}}
				</view>
				<view class="xutxt" v-if="info.user&&info.user.is_writer && info.user.writer_user_config.personal_note">
					约文须知
				</view>
				<scroll-view class="gexu" scroll-y="true" v-if="info.user&&info.user.is_writer">
					<view class="geli" v-if="info.user.writer_user_config.personal_note">
						<view class="getitle">
							个人说明：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.personal_note}}
						</view>
					</view>
					<view class="geli" v-if="info.user&&info.user.writer_user_config.communication_time">
						<view class="getitle">
							沟通时间：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.communication_time}}
						</view>
					</view>
					<view class="geli" v-if="info.user&&info.user.writer_user_config.remuneration_details">
						<view class="getitle">
							价格明细：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.remuneration_details}}
						</view>
					</view>
					<view class="geli" v-if="info.user&&info.user.writer_user_config.order_notice">
						<view class="getitle">
							下单须知：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.order_notice}}
						</view>
					</view>
					<view class="geli" v-if="info.user&&info.user.writer_user_config.publication_works">
						<view class="getitle">
							版权归属：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.publication_works}}
						</view>
					</view>
					<view class="geli" v-if="info.user&&info.user.writer_user_config.additional_remarks">
						<view class="getitle">
							额外备注：
						</view>
						<view class="getxt">
							{{info.user&&info.user.writer_user_config.additional_remarks}}
						</view>
					</view>
				</scroll-view>
				
				<scroll-view class="gexu" scroll-y="true" v-if="!info.user.writer_user_config.personal_note">
					<image :src="'/images/null.png' | formatImgUrl" mode="aspectFit" style="width: 100px;height: 123px;display:block;margin: 50rpx auto;" ></image>
				</scroll-view>
				
				<view v-if="info.uid != $db.get('userInfo').membe_id" class="fabox"
					@click="toImRoom()">
					<image :src="'/images/pp.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						{{info.user&&info.user.is_writer?'立即沟通':'发起私信'}}
					</view>
				</view>

				<view class="fabox" @click="$go('/pages/my/place?id='+ id)" v-if="userInfo.is_writer">
					<image :src="'/images/ji.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						直接下单
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show2 = false" class="closepic" mode=""></image>
		</u-popup>

	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	const Screen = uni.requireNativePlugin('Yam-Screen'); //插件	
	export default {
		data() {
			return {
				show: false,
				info: {},
				id: '',
				type: 0,
				show_wr: false,
				page: 1,
				list: {},
				type_jb: 0,
				count: 5,
				value: 4.8,
				type: 1,
				total: 0,
				userInfo: this.$db.get('userInfo'),
				show2: false,
				totalPage: true,
				isClick: true,
				isScroll: false
			};
		},
		onLoad(ops) {

			this.id = ops.id
			this.type = ops.type
		},
		onShow() {
			this.get_info();

			this.page = 1;
			this.list = [];
			this.get_list()
		},
		onHide() {
			setTimeout(()=>{
				// #ifdef APP-PLUS
						Screen.closeAntiRecordScreen();
				// #endif
			},100)
		},
		onUnload() {
			setTimeout(()=>{
				// #ifdef APP-PLUS
						Screen.closeAntiRecordScreen();
				// #endif
			},100)
		},
		onReachBottom() {
			this.get_list();
		},
		onPullDownRefresh(e) {
			// this.isScroll = true
			
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			this.page = 1;
			this.list = [];
			this.get_list()
		},
		methods: {
			look_lw(img){
				// #ifdef APP-PLUS
						Screen.openAntiRecordScreen();
				// #endif
				this.$common.previewImage(0,img)
			},
			toImRoom() {
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({

						url: '/pages/login/login'

					})
					return;
				}

				// this.$store.commit('createConversationActive', this.info.user.membe_id)
				// var url = ''
				// if (this.userInfo.is_writer) {
				// 	url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.info.user.membe_id
				// } else {
				// 	url = '/pages/tim/room'
				// }
				// uni.navigateTo({
				// 	url: url
				// })
				
				if(!this.isClick){
					return
				}
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: this.info.user.membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: this.info.user.membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: this.info.user.membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
										uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+this.info.user.membe_id);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    },
				})
					
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
				
			},
			goToreport() {
				this.show_wr = false
				this.show = false
				uni.navigateTo({
					url: '/showcase/showcase/edit?id=' + this.id
				})
			},
			delItem() {
				this.show_wr = false
				
				var that = this
				uni.showModal({
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '确认删除此橱窗吗？',
					success: function(res) {
						if (res.confirm) {

							that.$api.default.request('good/delGood', {
								id: that.id
							}, 'POST').then((res) => {
								if (res.code == 1) {

									that.show_wr = false;

									that.$common.successToShow(res.msg, () => {
										uni.navigateBack({ //返回上一个页面
											delta: 1
										});
									})
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			get_list() {
				var _this = this;
				this.$api.default.request('order/orderList_goods', {
					page: this.page,
					gid: this.id
				}).then((res) => {
					if (res.code) {

						if (res.data.data) {
							_this.total = res.data.total

							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list = res.data.data;
							}
							_this.page++; // 页数加一，加载下一页数据
						}
					}
					
					_this.totalPage = false
				})
			},
			get_info() {
				this.$api.default.request('good/info', {
					id: this.id
				}).then((res) => {
					if (res.code) {
						this.info = res.data
						this.value = Math.floor(res.data.comprehensive)
					}
				})
			},
			close() {
				this.show = false
			},
			jubao() {
				if (this.info.type !== 1) {
					uni.navigateTo({
						url: '/pages/find/report?id=' + this.info.id + '&type=' + this.info.type + '&newtype=1'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.preview-box{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		
		.preview-item{
			display: block;
			width: 100%;
			height: 100%;
		}
		
		image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.mask_img_bg {
		background: linear-gradient(to bottom, rgba(#F2F5F2, 0) 0%, rgba(#F2F5F2, 1) 80%);
	}

	page {
		background: rgba(242, 245, 242, 1);
	}

	.wrap {
		width: 100%;
		// height: 100vh;
		// background: linear-gradient(180deg, #45C4B0 17%, #F2F5F2 57%);
		// background-size: 100% 100%;
		position: relative;


		.bg_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 800rpx;
			z-index: -1;
		}

		.bg_img_box {
			width: 100%;
		}

		.head {
			padding: 26rpx 30rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: 300;

			.tit {
				display: flex;
				align-items: center;


				image {
					width: 40rpx;
					height: 40rpx;
					object-fit: cover;
					margin-left: 8rpx;
				}

				.withdraw {
					width: 180rpx;
					height: 42rpx;
					border-top-left-radius: 25rpx;
					border-bottom-left-radius: 25rpx;
					background: rgba(255, 255, 255, 0.2);
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					padding-bottom: 2rpx;
					position: absolute;
					right: 0;

					image {
						width: 26rpx;
						height: 26rpx;
						object-fit: cover;
						margin-left: 20rpx;
						margin-right: 4rpx;
					}
				}
			}

			.money_num {
				font-size: 60rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.consumption {
				display: flex;
				margin-top: 40rpx;

				.today {
					margin-right: 80rpx;

					.total_tit {
						font-size: 24rpx;
						font-weight: 300;
						color: #FFFFFF;
					}

					.num {
						font-size: 28rpx;
						color: #FFFFFF;
					}

				}
			}
		}

		.showcase_item {
			padding: 30rpx 30rpx;
			background: #fff;
			margin: 0 30rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.user_head {
				.pic {
					width: 80rpx !important;
					height: 80rpx !important;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.top {
					width: 500rpx;
					display: flex;
					align-items: center;

					.suc {
						background: rgba(69, 196, 176, 0.15);
						color: #45C4B0;
					}

					.zhong {
						background: rgba(255, 170, 0, 0.15);
						color: #ffaa00;
					}

					.jipic {
						width: 41px;
						height:19px;
					}

					.biepic {
						width: 41px;
						height:19px;
						margin-left: 4px;
					}
				}

				.user_info2 {
					font-size: 20rpx;
					font-weight: normal;
					color: #999999;
					margin-top: 10rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						// margin-left: 12rpx;
						margin-right: 18rpx;
					}
					.onlines{
						.noline_str{
							color: #999;
							background: #999;
						}
						.lines{
							
							color: #45C4B0;
							background: #45C4B0;
						}
						position: relative;
						.online{
							color: #45C4B0;
						}
						
						
						.dian {
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							margin-left: 15rpx;
							margin-right: 5rpx;
						}
					}
					
				}

				.contact-btn {
					width: 51px;
					height: 20px;
					border-radius: 94px;
					background: rgba(69, 196, 176, 0.15);
					font-family: '思源黑体';
					font-size: 10px;
					color: #45C4B0;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.showcase_head {
				display: flex;
				position: relative;
				align-items: center;

				.i1 {
					width: 32rpx;
					height: 32rpx;

					margin-right: 8rpx;
				}

				.tit {
					
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
				}

				.tits {
					width: 90%;
				}

				.tip {
					font-size: 20rpx;
					font-weight: normal;
					color: #999999;
					padding: 2rpx 8rpx;
					background: rgba(153, 153, 153, 0.15);
					border-radius: 8rpx;
					margin-left: 16rpx;
				}

				.jubox {
					position: absolute;
					top: 6rpx;
					right: 0rpx;
					width: 32rpx;
					height: 32rpx;
					// border: 1px dashed #eeeeee;
				}
			}

			.showcase_content {
				font-size: 24rpx;
				font-weight: normal;
				color: #3D3D3D;
				margin: 18rpx 0 30rpx;
			}

			.showcase_wrap {
				margin-top: 28rpx;
				display: grid;
				grid-gap: 28rpx 24rpx;
				grid-template-columns: repeat(auto-fill, 300rpx);
				padding-bottom: 20rpx;

				.wrap_item {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #999999;

					image {
						width: 24rpx;
						height: 24rpx;
						object-fit: cover;
						margin-right: 4rpx;
					}
				}
			}
		}

		.line {
			width: 264rpx;
			height: 48rpx;
			background: url('https://cdnauth.dreamyuewen.com/images/line.png') no-repeat;
			background-size: 100% 100%;
			margin: 20rpx auto;
		}
	}

	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;

		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;

			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}

			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}

		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 10px 0px rgba(69, 196, 176, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;

		.wrap {
			width: 630rpx;
			height: 80rpx;
			border-radius: 24rpx;
			background: #3D3D3D;
			display: flex;
			justify-content: space-between;

			.wrap_left {
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				box-sizing: border-box;
				padding-top: 4rpx;

				.top {
					font-size: 28rpx;
					font-weight: bold;

					.choose {
						background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}

					.num {
						color: #FFFFFF;
						margin-left: 8rpx;
					}
				}

				.bottom {
					font-size: 20rpx;
					color: #999999;
				}
			}

			.wrap_right {
				width: 190rpx;
				height: 100%;
				border-radius: 24rpx;
				background: #45C4B0;
				font-size: 24rpx;
				font-weight: bold;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
			}
		}
	}

	// 10.16新增
	.float-btn {
		position: fixed;
		top: 22rpx;
		right: 46rpx;
		width: 88px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-size: 12px;
		color: #FFFFFF;
		background: rgba(#000, .6);
		border-radius: 92px;

	}

	.total-comments {

		.title {
			font-family: Source Han Sans CN;
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}

		.total-num {
			font-family: Source Han Sans CN;
			font-size: 40px;
			font-weight: bold;
			font-feature-settings: "kern" on;
			color: #45C4B0;
			margin-right: 10rpx;
		}

		.total-font {
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #999999;
			padding-left: 10rpx;
		}

		.sort-type {
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #3D3D3D;
		}

		.right-box {
			padding-top: 20rpx;
			margin-left: 30rpx;
			padding-right: 10rpx;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #3D3D3D;

			.fonttxt {
				width: 60rpx;
			}
		}

		.mb12 {
			margin-bottom: 12rpx;
		}
	}

	/deep/.u-line-progress {
		margin: 0 8rpx;
		width: 180rpx;
	}

	.baibox {
		background-color: #ffffff;
		width: 474rpx;
		border-radius: 8px;
		opacity: 1;
		padding: 100rpx 30rpx 40rpx;
		position: relative;

		.baihead {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			position: absolute;
			top: -80rpx;
			left: 50%;
			margin-left: -80rpx;
		}

		.nickname {
			font-size: 32rpx;
			padding-bottom: 8rpx;
			font-weight: bold;
			text-align: center;
			color: #3D3D3D;
		}

		.xutxt {
			font-size: 24rpx;
			text-align: center;
			color: #999999;
			padding-bottom: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}

		.exhibit {
			display: grid;
			grid-gap: 16rpx 16rpx;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 218rpx);

			.item {
				width: 218rpx;
				height: 218rpx;
				background: rgba(216, 216, 216, 0.3);
				border: 8rpx;

				image {
					width: 218rpx;
					height: 218rpx;
					border-radius: 0.5em;
				}
			}
		}

		.gexu {
			padding-bottom: 20rpx;
			max-height: 450rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			margin-bottom: 20rpx;

			.geli {
				display: flex;
				align-items: flex-start;
				padding-bottom: 20rpx;

				.getitle {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}

				.getxt {

					// padding-top: 1rpx;

					font-size: 26rpx;
					color: #999999;
					line-height: 35rpx;
				}
			}
		}

		.fabox {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 454rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			margin-top: 20rpx;

			.fapic {
				width: 40rpx;
				height: 40rpx;
			}

			.fatxt {
				font-size: 28rpx;
				font-weight: 500;
				padding-left: 14rpx;
				letter-spacing: 0em;
				color: #FFFFFF;
			}
		}

	}

	.closepic {
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx auto 0;
	}
</style>